<template>
  <div class="home">
    <div class="home-title">
      <div class="home-logo">
        <img src="../static/images/logo.webp" alt="" srcset="" />
      </div>
      <h2>心情惬意，来杯咖啡吧 ~</h2>
    </div>
    <div class="home-banner">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="item in images">
          <img :src="require('@/static/images/' + item.img)" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home-hot">
      <div class="home-hot-title">
        <h3>热门推荐</h3>
        <div class="home-hot-list">
          <ul>
            <li v-for="(item, index) in hotlist.data" @click="goCont(item)">
              <img :src="item.img" alt="" srcset="">
              <span class="iconfont icon-duihaoqipao2"></span>
              <h5>{{ index + 1 }}st</h5>
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="home-culture">
      <h3>咖啡文化</h3>
      <!-- <div class="home-culture-list">
        <ul>
          <li index="0" class="active">咖啡知识</li>
          <li index="1">咖啡调制</li>
          <li index="2">咖啡烘培</li>
          <li index="3">咖啡品鉴</li>
        </ul>
        <component :is="coffeeBaking"></component>
      </div> -->
      <van-tabs v-model:active="active">
        <van-tab title="@.知识">
          <coffee-knowledge></coffee-knowledge>
        </van-tab>
        <van-tab title="@.调制">
          <coffee-preparation></coffee-preparation>
        </van-tab>
        <van-tab title="@.烘培">
          <coffee-baking></coffee-baking>
        </van-tab>
        <van-tab title="@.品鉴">
          <coffee-taste></coffee-taste>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入子组件
import coffeeBaking from '@/components/Coffee Culture/CoffeeBaking.vue';
import coffeeTaste from '@/components/Coffee Culture/CoffeeTaste.vue';
import coffeeKnowledge from '@/components/Coffee Culture/CoffeeKnowledge.vue';
import coffeePreparation from '@/components/Coffee Culture/CoffeePreparation.vue';
// 导入相关vue API
import { reactive, ref, defineComponent, onMounted, computed, onBeforeMount } from "vue";
import { useRoute, useRouter } from 'vue-router';

import { getHotList } from '../request'
// import store from '@/store';
import { mapState, mapGetters, useStore } from 'vuex';

//注册子组件
defineComponent({
  coffeeBaking,
  coffeeTaste,
  coffeeKnowledge,
  coffeePreparation
});
const store: any = useStore()
const router = useRouter();
// tab组件
const active = ref(0);
// 图片
const images: { img: string }[] = reactive([
  { img: "banner5.jpg" },
  { img: "banner3.jpg" },
  { img: "banner4.jpg" },
  { img: "banner2.jpg" },
]);



let hotlist: any = reactive({
  data: []
})
onBeforeMount(() => {
  // const ccc = () => {
  getHotList().then((content: any) => {

    console.log(content);
    let { result } = content;
    let hot = result.map((item: any) => {
      let obj: any = {};
      obj.id = item.hot_id;
      obj.name = item.hot_name;
      obj.img = item.hot_img;
      return obj
    })
    hotlist.data = hot;
    console.log('111', hotlist.data);

    // store.commit('setAAA', hot);
  })
    .catch(err => {
      console.log(err);

    })
})

const goCont = (item: any) => {
  router.push({
    path: '/menu/content',
    query: {
      msg: 'content',
      id: item.id
    }
  })
}

</script>
<style lang="scss">
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.home {
  position: relative;

  .home-title {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 3.3333rem;
    background-color: $backGroundColor;
    border-bottom: 1.5px solid #fff;

    .home-logo {
      width: 4.5rem;
      height: 4rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h2 {
      margin-top: 0.5333rem;
      color: #fff;
      font-size: 22px;
    }
  }

  .home-banner {
    width: 100%;
    margin-top: 3.3rem;

    .my-swipe .van-swipe-item {
      width: 100%;
      height: 200px;
      color: #fff;
      font-size: 20px;
      text-align: center;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .home-hot {
    margin-top: 1.3333rem;

    h3 {
      padding-left: .4rem;
      width: 6rem;
      border-left: 2px solid $backGroundColor;
    }

    .home-hot-list {
      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          position: relative;
          flex: 50%;
          height: 8rem;
          margin: 1.3333rem 0 2rem 0;
          text-align: center;


          img {
            // width: 100%;
            height: 100%;
            border-radius: 100%;
            box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);

          }

          span {
            position: absolute;
            top: 0;
            right: 20px;
            font-size: 40px;
            color: #2b4c7e;
          }

          h5 {
            position: absolute;
            top: 10px;
            right: 30px;
            color: #4b4646;
            font-size: 13.5px;
          }

          p {
            margin-top: .4rem;
            font-weight: 600;
            color: #4b4646;
            font-size: 16.5px;
          }
        }
      }
    }
  }

  .home-culture {
    margin-top: 2.6667rem;
    height: 500px;

    h3 {
      padding-left: .4rem;
      width: 6rem;
      border-left: 2px solid $backGroundColor;
    }

    .van-tabs {
      margin-top: 1.3333rem;
      width: 100%;
      height: 13.3333rem;
      background-color: #fff;

    }

    .van-tabs__line {
      background: $backGroundColor;
      width: 3.2rem
    }

    .van-tab--active {
      color: $backGroundColor;
    }


    // .home-culture-list {
    //   width: 95%;
    //   height: 2.6667rem;
    //   margin: 1.2rem auto 0;
    //   background-color: #fff;
    //   border-radius: 25px;
    //   // color: #4b4646;

    //   ul {
    //     display: flex;
    //     height: 100%;

    //     li {
    //       flex: 25%;
    //       height: 100%;
    //       text-align: center;
    //       line-height: 2.6667rem;
    //       color: #4b4646;
    //       font-size: 14px;
    //       transition: all .5s;

    //       &.active {
    //         background-color: $backGroundColor;
    //         border-radius: 25px;
    //         color: #fff;
    //       }
    //     }
    //   }
    // }
  }
}
</style>